<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情</title>
    <!--引入ElementUI的样式文件-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
        .el-main {
            background-color: #FFFFFF;
            color: #333;
            /*text-align: center;*/
            line-height: 30px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }



        .bottom {
            margin-top: 13px;
            line-height: 12px;
        }
        .desc-container{
            border: 1px solid red;
            display: flex;/*使用弹性布局*/
            /*align-items: center;*/
            /*align-content: center;*/
            /*justify-items: center;*/
            justify-content: center;/*设置主轴对齐方式居中*/
        }
        .desc-container .img-container img{
            width: 350px;
            height: 400px;
        }

        .command-title{
            /*width: 100%;*/
            margin-top: 10px;
            height: 60px;
            line-height: 60px;
            padding-left: 20px;
            background-color: coral;
            color: white;
            font-weight: bold;
            font-size: 26px;
        }

        .command-content{

            border: 1px solid red;
            margin: 3px 0px;
            padding-left: 0px;
        }

        .command-content-title{
            border-bottom: 1px dashed black;
            padding: 10px;

        }

        .el-form-item__content{
            text-align: right;
        }

    </style>
</head>
<body>
<div id="bookDesc-container">
    <el-container>
        <el-header>Header</el-header>
        <el-main>
            <div>
                <div class="desc-container">
                    <div class="img-container">
                        <img :src="'/images/books/'+book.bookImage">
                    </div>
                    <div>
                        <h3>书名:{{book.bookName}}</h3>
                        <h3>单价:¥{{book.bookPrice}}</h3>
                        <h3>
                            <el-input-number v-model="count" :min="1" :max="10000"></el-input-number>
                            <el-button type="warning" icon="el-icon-shopping-cart-full">加入购物车</el-button>
                            <el-button type="danger" icon="el-icon-s-goods">购买</el-button>
                        </h3>
                    </div>
                </div>
                <div class="cmmond-container">
                    <div class="command-title">商品评论</div>
                    <div style="margin-top:10px">
                        <el-form ref="form" :model="comment" label-width="80px">
                            <el-form-item label="评论内容">
                                <el-input type="textarea" v-model="comment.commentMessage" rows="5" :disabled="curUser==null?true:false"></el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" :disabled="curUser==null?true:false" @click="addComment">添加评论</el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                        <div v-for="commentView in commentViewList" class="command-content">
                            <div class="command-content-title">
                                <span style="margin-right: 30px">评论人:{{commentView.userName}}</span>
                                <span>发布时间:{{commentView.createTime}}</span>
                            </div>
                            <div style="padding:10px">
                                {{commentView.commentMessage}}
                            </div>
                        </div>
                </div>
            </div>
        </el-main>
        <el-footer>Footer</el-footer>
    </el-container>
</div>

<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/axios.min.js"></script>
<script>
    new Vue({
        el:'#bookDesc-container',
        data(){
            return{
                bookId:0,//要查看商品详情的商品编号
                book:{},//商品对象
                count:1,//加入购物车的数量
                commentViewList:[],//图书评论列表
                comment:{},//comment对象，添加评论表单绑定的对象
                curUser: {userId:93,userName:'admin'},//当前登录的用户对象
            }
        },
        methods:{
            //获得路径参数传入的bookId
            getBookId(){
                let searchParams = new URLSearchParams(window.location.search);
                this.bookId = searchParams.get('bookId'); // 获取参数foo的值，结果为 "1"
            },
            /**
             * 根据商品Id获得商品详情
             */
            getDescById(){
                //判断bookId是否获得
                if(this.bookId == 0){
                    this.getBookId();
                }
                axios
                    .get('books/findBookById/'+this.bookId)
                    .then(response=>{
                        this.book = response.data;
                        // console.log(response.data());
                    })
                    .catch(err=>{
                        console.log(err);
                    });

            },
            /***
             * 添加评论信息
             */
            addComment(){
                if(this.curUser != null){
                    this.comment.userId=this.curUser.userId;
                    this.comment.bookId=this.bookId;

                    axios
                        .post('books/addComment',this.comment)
                        .then(response=>{
                            if(response.data.success){
                                this.$message.success({
                                    message:response.data.message,
                                    duration:1500,
                                    onClose:()=>{
                                        this.comment.commentMessage="";
                                        //调用查询评论信息
                                        this.getCommentByBook();
                                    }
                                });

                            }
                        })
                        .catch(err=>{
                            console.log(err);
                        });


                }else{
                    this.$message.error('请登录后发布评论信息~!');
                }
            },
            /**
             * 根据图书编号获得该图书的评论信息
             */
            getCommentByBook(){
                //判断bookId是否获得
                if(this.bookId == 0){
                    this.getBookId();
                }
                axios
                    .get('/books/getComment/'+this.bookId)
                    .then(response=>{
                        this.commentViewList = response.data;
                        //console.log(this.commentList);
                    })
                    .catch(err=>{
                        console.log(err)
                    });

            }
        },
        created(){
            this.getBookId();
            this.getDescById();
            this.getCommentByBook();
        }
    });
</script>
</body>
</html>